<template>
<detail-dialog-panel v-bind="$attrs" v-on="$listeners" :left-class="model?'left-full':'left'" :title="title">
    <el-tabs tab-position="left" v-bind="$attrs" v-on="$listeners" class="detail-tab"
             v-model="activeName">
        <template v-if="model">
            <el-tab-pane label="表单" name="first">
                <slot :data="row"></slot>
            </el-tab-pane>
            <el-tab-pane label="正文" name="second">
                <slot name="center" :data="row"></slot>
            </el-tab-pane>
        </template>
        <el-tab-pane label="概况" name="first" v-else>
          <div class="content">
            <div style="min-width: 350px; max-width: 400px">
            <slot :data="row"></slot>
            </div>
            <div style="flex: 1;margin-left: 15px">
            <slot name="center" :data="row"></slot>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程" v-if="id" name="fifth">
          <div style="overflow-y: scroll;height: 100%;">
            <right-steps :row="row"></right-steps>
          </div>
        </el-tab-pane>
    </el-tabs>
    <div slot="right">
        <div>
            <slot name="right">
                <agree-button @click="clickHandle(0)" :loading="loading"></agree-button>
                <template  v-if="!isEdit">
                    <square-button title="保存草稿" icon="el-icon-tickets" @click="clickHandle(1)" :loading="loading"></square-button>
                </template>
<!--            <square-button title="暂存" icon="el-icon-document-checked" @click="clickHandle(2)" v-else></square-button>-->
                <slot name="right-add">
                </slot>
            </slot>
            <copy-button></copy-button>
            <square-button title="切换模式" icon="el-icon-guide" @click="changeModel"></square-button>
        </div>
    </div>
</detail-dialog-panel>
</template>
<script>
    import DetailDialogPanel from "./Case/DetailDialogPanel";
    import AgreeButton from "./Case/Buttons/AgreeButton";
    import SquareButton from "./Case/SquareButton";
    import RightSteps from "./Case/RightSteps";
    import CopyButton from "./Case/Buttons/CopyButton";
    import ScrollPanel from "../Common/ScrollPanel";
    import eventBus from "@/utils/eventBus";
    export default {
        name: "WorkflowCreateDialog",
        components: {ScrollPanel, CopyButton, RightSteps, SquareButton, AgreeButton, DetailDialogPanel},
        props: {
            height: {
                type: String,
                default: "600px"
            },
            row: {
                type: Object,
                default: function () {
                    return {}
                }
            },
        },
        computed:{
          title(){
            return this.row.id?'编辑-'+this.row.title:'新建-'+this.$route.meta.title
          }
        },
        data() {
            return {
                activeName: "first",
                id:"",
                isEdit:false,
                model: false,
                loading:false
            };
        },
        created() {
            if(this.row){
                this.id = this.row.ticket
                this.isEdit = this.row.is_edit
                if(this.isEdit){
                  this.getDetailInfo()
                }
            }
            eventBus.$on("btnLoading", (loading) => {
                this.loading = loading
            });
        },
        methods: {
            clickHandle(type) {
                this.$emit("submit", type)
            },
            changeModel() {
                this.model = !this.model
                this.activeName = "first"
            },
            getDetailInfo() {
              this.$store.dispatch("workManagement/getWorkInfo",this.row)
            },
        }
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/styles/workflow";
</style>
